<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="mainArea">
        <div :class="['xInput', choOnFocusInput === 1 ? 'hasChoOnFocus' : '']">
          <div class="inputLabel">手机号码</div>
          <div class="inputArea">
            <input maxlength="11" type="number" @focus="handleOnFocus_1" v-model="phoneNum" placeholder="请输入手机号" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
          </div>
        </div>
        <div :class="['xInput', choOnFocusInput === 2 ? 'hasChoOnFocus' : '']">
          <div class="inputLabel">验证码</div>
          <div class="inputArea inputCode">
            <input maxLength="4" type="number" @focus="handleOnFocus_2" v-model="code" placeholder="4位验证码" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
            <span :class="['yam', showyzm ? 'yzmActive' : '']" @click="sendYzm">{{ yzmMsg }}</span>
          </div>
        </div>
        <!-- <div :class="['xInput', choOnFocusInput === 3 ? 'hasChoOnFocus' : '']">
          <div class="inputLabel">密码</div>
          <div class="inputArea">
            <input type="password" @focus="handleOnFocus_3" v-model="pwd" placeholder="请输入密码（不少于6位）" placeholder-style="color: #C7C7C7;fontWeight: normal;" />
          </div>
        </div> -->
        <div class="decribe">点击立即注册，即表示同意 <span> 《用户注册协议》 </span>和<span> 《用户隐私条款》 </span></div>
        <div class="registerBtn" @click="handleJustGoToRegister">立即注册</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  data () {
    return {
      choOnFocusInput: 0,
      phoneNum: '', // 手机号
      code: '', // 二维码
      pwd: '', // 密码
      rsaPassWord: '', // 加密后的密码
      yzmMsg: '获取验证码',
      showyzm: false,
      nNum: 60,
      showColor: 'cancle',
      timer: null,
      regTime: null
    }
  },
  watch: {
    phoneNum (e) {
      const reg = /^1[23456789]\d{9}$/
      if (reg.test(e)) {
        this.showyzm = true
        if (this.code.length > 5 && this.code.length < 17) {
          this.showColor = 'sure'
        }
      } else {
        this.showyzm = false
        this.showColor = 'cancle'
        this.yzmMsg = '获取验证码'
        this.nNum = 60
        clearInterval(this.timer)
      }
    }
  },
  onUnload () {
    this.choOnFocusInput = 0
    this.phoneNum = ''
    this.code = ''
    this.yzmMsg = '获取验证码'
    this.showyzm = false
    this.nNum = 60
    this.showColor = 'cancle'
    clearInterval(this.timer)
  },
  methods: {
    handleOnFocus_1 () {
      this.choOnFocusInput = 1
    },
    handleOnFocus_2 () {
      this.choOnFocusInput = 2
    },
    handleOnFocus_3 () {
      this.choOnFocusInput = 3
    },
    sendYzm () {
      if (this.showyzm) {
        const reg = /^1[23456789]\d{9}$/
        if (!reg.test(this.phoneNum)) {
          wx.showToast({
            title: '请输入正确11位手机号码',
            icon: 'none'
          })
        } else {
          this.senyam()
          this.$httpWX.post({
            url: '/shengxueApi/identity/sendTeacherMessageCode',
            data: {
              'codeType': 2,
              'mobile': this.phoneNum
            },
            header: {
              'content-type': 'application/json', // 默认值
              'Api-Version': '2.0.1'
            }
          }).then(res => {
            if (res.code === '0') {
              wx.showToast({
                title: res.message,
                icon: 'success'
              })
            } else {
              wx.showToast({
                title: res.message,
                icon: 'none'
              })
            }
          })
        }
      }
    },
    senyam () {
      this.showyzm = false

      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = '重新获取' + this.nNum
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          this.yzmMsg = '获取验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },
    encryption (e) {
      let encryptor = new JSEncrypt() // 新建JSEncrypt对象
      let publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
      encryptor.setPublicKey(publicKey) // 设置公钥
      this.regTime = new Date().getTime()
      // this.rsaPassWord = encryptor.encrypt(this.regTime + e)
    },
    handleJustGoToRegister () {
      const reg = /^1[23456789]\d{9}$/
      if (!reg.test(this.phoneNum)) {
        wx.showToast({
          title: '请输入正确11位手机号码',
          icon: 'none'
        })
      } else if (this.code.length !== 4) {
        wx.showToast({
          title: '请输入4位验证码',
          icon: 'none'
        })
      // } else if (this.pwd === '') {
      //   wx.showToast({
      //     title: '请输入密码',
      //     icon: 'none'
      //   })
      } else {
        let userData = JSON.parse(wx.getStorageSync('registerMsg'))
        this.encryption(this.pwd)
        let nowObj = {
          account: this.phoneNum,
          credentials: this.code,
          registerTime: this.regTime,
          password: ''
        }

        let newObj = Object.assign(userData, nowObj)
        console.log('newObj: ', newObj)
        this.$httpWX.post({
          url: '/shengxueApi/identity/teacherMessageRegister',
          data: newObj,
          header: {
            'content-type': 'application/json', // 默认值
            'Api-Version': '2.0.1'
          }
        }).then(res => {
          if (res.code === '0') {
            wx.showToast({
              title: res.message,
              icon: 'success',
              duration: 2000
            })
            wx.removeStorageSync('registerMsg')
            wx.reLaunch({ url: '../login/main' })
          } else {
            wx.showToast({
              title: '注册失败',
              icon: 'loading'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .mainArea {
    padding: 30rpx 60rpx 0;
    box-sizing: border-box;
    .xInput {
      margin-bottom: 60rpx;
      .inputLabel {
        color: #999;
        font-size: 30rpx;
        font-weight: bold;
      }
      .inputArea {
        height: 88rpx;
        width: 100%;
        padding: 20rpx 10rpx;
        border-bottom: 2rpx solid #E5E8ED;
        input {
          height: 100%;
          font-size: 30rpx;
          color: #222;
        }
      }
      .inputCode {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: none;

        input {
          width: 315rpx;
          border-bottom: 2rpx solid #E5E8ED;
        }
        .yam {
          display: inline-block;
          width: 280rpx;
          height: 88rpx;
          line-height: 88rpx;
          border-radius: 8rpx;
          background: #FAFAFA;
          color: #BBBBBB;
          font-size: 30rpx;
          text-align: center;
        }
        .yzmActive {
          background: #FFAD0D;
          color: #fff;
        }
      }
    }
    .hasChoOnFocus {
      .inputLabel {
        color: #FFAD0D;
      }
      .inputArea {
        border-bottom-color: #FFAD0D;
      }
      .inputCode {
        input {
          border-bottom-color: #FFAD0D;
        }
      }
    }
    .decribe {
      color: #BBB;
      font-size: 26rpx;
      span {
        text-decoration: underline;
      }
    }
    .registerBtn {
      margin: 100rpx auto 0;
      width: 320rpx;
      height: 88rpx;
      border-radius: 44rpx;
      line-height: 88rpx;
      text-align: center;
      color: #fff;
      background: #FFAD0D;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
</style>
